<template>
    <el-card shadow="never">
        <template #header>
            <div class="card-header">
                <span>商品类型管理</span>
            </div>
        </template>
        <el-row :gutter="14">
            <el-col :span="5">
                <el-input placeholder="请输入商品类型名称" v-model="searchContent"></el-input>
            </el-col>
            <el-col :span="5">
                <el-input placeholder="请输入商品类型等级" v-model="searchLevel"></el-input>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" size="small" @click="goodsTypeSearch">搜索</el-button>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" size="small" @click="addGoodsTypeInfo()">添加</el-button>
            </el-col>
        </el-row>

        <el-table :data="tableData" style="width: 100%">
            <el-table-column width="60" label="序号">
                <template #default="scope">
                    <span>{{ scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="类型" width="200">
                <template #default="scope">
                    <span style="margin-left: 10px">{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column label="等级" width="80">
                <template #default="scope">
                    <span style="margin-left: 10px">{{ scope.row.level }}</span>
                </template>
            </el-table-column>
            <el-table-column label="所属类型" width="80">
                <template #default="scope">
                    <span style="margin-left: 10px">{{ scope.row.parentName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="mini" type="danger" @click="goodsTypeDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="changePage"
        ></el-pagination>
    </el-card>
    <addGoodsType :centerDialogVisible="centerDialogVisible" @onCloseDialog="closeDialogVisible"></addGoodsType>
</template>

<script>
import { onMounted, reactive, toRefs, ref } from "vue";
import axios from 'axios'
import addGoodsType from './addGoodsType.vue'
// import updategoodsType from './updategoodsType.vue'
import { ElMessageBox, ElNotification } from "element-plus";

// 读取页面数据
function loadData(state) {
    const params = {
        pageCurrent: state.currentPage,
        pageSize: state.pageSize,
        search: state.searchContent,
        level: state.searchLevel,

    }
    axios({
        url: '/getGoodsTypeOffset',
        method: 'get',
        params: params,
    }).then(res => {
        // console.log(res.data.data)
        state.tableData = res.data.data.list;
        state.total = res.data.data.total // 总的记录数
    });
}


// 删除商品类型
function useGoodsTypeDelete(state) {
    const goodsTypeDelete = (id) => {
        // console.log('index=',index)
        console.log('id=', id)
        ElMessageBox.confirm("是否确认删除该类型？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            callback: (action) => {
                if (action == 'confirm') {
                    axios({
                        url: '/deleteGoodsType',
                        method: 'get',
                        params: {
                            count: id
                        }
                    }).then(res => {
                        console.log(res)
                        if (res.data.code == 200) {
                            ElNotification({
                                title: "成功",
                                message: "删除成功",
                                type: "success",
                                duration: 2000,
                            });
                            loadData(state)
                        } else {
                            ElNotification({
                                title: "失败",
                                message: "删除失败",
                                type: "error",
                                duration: 2000,
                            });
                        }
                    });
                }
            },
        });
    }
    return {
        goodsTypeDelete
    }
}

// 搜索商品
function useGoodsTypeSearch(state) {
    const goodsTypeSearch = () => {
        state.currentPage = 1;
        const params = {
            pageCurrent: state.currentPage,
            pageSize: state.pageSize,
            name: state.searchContent,
            level: state.searchLevel,
        }
        axios({
            url: '/selectByNameAndLevelOffset',
            method: 'get',
            params: params
        }).then(res => {
            // console.log(res.data)
            if (res.data.code == 200) {
                state.tableData = res.data.data.list
                state.total = res.data.data.total
            } else {
                state.tableData = [];
                ElNotification({
                    title: "失败",
                    message: "查无此信息",
                    type: "error",
                    duration: 2000,
                });
            }


        });
    };
    return {
        goodsTypeSearch,
    }
}


export default {
    components: {
        addGoodsType, // 注册组件
    },
    setup() {
        const state = reactive({
            tableData: [],
            centerDialogVisible: false,
            updateDialogVisible: false, // 控制修改窗口显示与隐藏
            total: 0,
            currentPage: 1,     // 当前页码
            pageSize: 3,
            searchContent: "",  // 搜索条件类型名称
            searchLevel: 1,
            gId: 0, //要修改的商品id
        });
        const imagesURL = import.meta.env.VITE_APP_URL + "/images/";

        onMounted(() => {
            loadData(state);
        });
        // 分页-页面切换的时候执行该方法
        const changePage = (val) => {
            state.currentPage = val;
            loadData(state);
            document.body.scrollTop = 0
            document.documentElement.scrollTop = 0
        };
        const addGoodsTypeInfo = () => {
            state.centerDialogVisible = true;
        };
        const closeDialogVisible = (visible, data) => {
            state.centerDialogVisible = visible;
            // console.log(data)
            //返回成功的data，重新添加到数据中，令自动读取
            if (data !== undefined) {
                // state.tableData.push(data);
                loadData(state);
            }
        };
        const closeUpdateDialogVisible = (visible, data) => {
            state.updateDialogVisible = visible;
            if (data !== undefined) {
                loadData(state);
            }
        };

        return {
            ...toRefs(state), //...解构结构后不是响应式对象。toRefs数据转换成响应式对象
            imagesURL,
            addGoodsTypeInfo,
            closeDialogVisible,
            ...useGoodsTypeSearch(state),
            ...useGoodsTypeDelete(state),
            changePage,
            closeUpdateDialogVisible,
        };
    },
    methods: {
        // 序号-自动递增
        indexMethod(index) {
            return index = index + 1;
        }
    },
};
</script>
<style>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>